import React, { useState } from 'react';
import { Layout, Menu, Breadcrumb, Card, Table, Button, Modal, Form, Input, InputNumber, message, Popconfirm } from 'antd';
import { MedicineBoxOutlined, PlusOutlined, DeleteOutlined } from '@ant-design/icons';
import { Content } from 'antd/es/layout/layout';

const MedicineManagement = () => {
  const [medicines, setMedicines] = useState([
    { id: 1, name: '阿莫西林胶囊', category: '抗生素类', price: 20, stock: 100 },
    { id: 2, name: '布洛芬片', category: '解热镇痛类', price: 20, stock: 80 },
    { id: 3, name: '奥美拉唑', category: '消化系统类', price: 40, stock: 60 },
    { id: 4, name: '维生素C片', category: '维生素类', price: 10, stock: 200 },
  ]);
  
  const [isModalVisible, setIsModalVisible] = useState(false);
  const [editingMedicine, setEditingMedicine] = useState<any>(null);
  const [form] = Form.useForm();

  // 表格列定义
  const columns = [
    {
      title: '药品名称',
      dataIndex: 'name',
      key: 'name',
    },
    {
      title: '分类',
      dataIndex: 'category',
      key: 'category',
    },
    {
      title: '价格(元)',
      dataIndex: 'price',
      key: 'price',
    },
    {
      title: '库存',
      dataIndex: 'stock',
      key: 'stock',
    },
    {
      title: '操作',
      key: 'action',
      render: (_: any, record: any) => (
        <>
          <Button 
            type="link" 
            onClick={() => handleEdit(record)}
          >
            编辑
          </Button>
          <Popconfirm
            title="确定删除此药品吗？"
            onConfirm={() => handleDelete(record.id)}
            okText="确定"
            cancelText="取消"
          >
            <Button type="link" danger icon={<DeleteOutlined />} />
          </Popconfirm>
        </>
      ),
    },
  ];

  const showModal = () => {
    setEditingMedicine(null);
    form.resetFields();
    setIsModalVisible(true);
  };

  const handleEdit = (record: any) => {
    setEditingMedicine(record);
    form.setFieldsValue(record);
    setIsModalVisible(true);
  };

  const handleDelete = (id: number) => {
    setMedicines(medicines.filter(medicine => medicine.id !== id));
    message.success('药品删除成功！');
  };

  const handleOk = () => {
    form.validateFields().then(values => {
      if (editingMedicine) {
        // 编辑药品
        setMedicines(medicines.map(medicine => 
          medicine.id === editingMedicine.id 
            ? { ...values, id: editingMedicine.id } 
            : medicine
        ));
        message.success('药品更新成功！');
      } else {
        // 新增药品
        const newMedicine = {
          id: medicines.length > 0 ? Math.max(...medicines.map(m => m.id)) + 1 : 1,
          ...values
        };
        setMedicines([...medicines, newMedicine]);
        message.success('药品添加成功！');
      }
      form.resetFields();
      setIsModalVisible(false);
    });
  };

  const handleCancel = () => {
    form.resetFields();
    setIsModalVisible(false);
  };

  return (
    <Layout style={{ minHeight: '100vh' }}>
      <Layout className="site-layout">
        // 使用已导入的 Content 组件替换 Layout.Content
        <Content style={{ margin: '16px' }}>
          <Breadcrumb style={{ margin: '16px 0' }}>
            <Breadcrumb.Item>药品管理</Breadcrumb.Item>
          </Breadcrumb>
          <div className="site-layout-background" style={{ padding: 24, minHeight: 360, background: '#fff' }}>
            <Card 
              title="药品列表" 
              bordered={false}
              extra={
                <Button 
                  type="primary" 
                  icon={<PlusOutlined />} 
                  onClick={showModal}
                >
                  添加药品
                </Button>
              }
            >
              <Table dataSource={medicines} columns={columns} pagination={{ pageSize: 5 }} />
            </Card>
          </div>
        </Content>
      </Layout>

      {/* 添加/编辑药品模态框 */}
      <Modal
        title={editingMedicine ? "编辑药品" : "添加药品"}
        visible={isModalVisible}
        onOk={handleOk}
        onCancel={handleCancel}
        okText="确认"
        cancelText="取消"
      >
        <Form form={form} layout="vertical">
          <Form.Item
            name="name"
            label="药品名称"
            rules={[{ required: true, message: '请输入药品名称!' }]}
          >
            <Input />
          </Form.Item>
          <Form.Item
            name="category"
            label="药品分类"
            rules={[{ required: true, message: '请输入药品分类!' }]}
          >
            <Input />
          </Form.Item>
          <Form.Item
            name="price"
            label="价格(元)"
            rules={[{ required: true, message: '请输入药品价格!' }]}
          >
            <InputNumber min={0} step={0.1} style={{ width: '100%' }} />
          </Form.Item>
          <Form.Item
            name="stock"
            label="库存数量"
            rules={[{ required: true, message: '请输入库存数量!' }]}
          >
            <InputNumber min={0} step={1} style={{ width: '100%' }} />
          </Form.Item>
        </Form>
      </Modal>
    </Layout>
  );
};

export default MedicineManagement;